<template>
  <component :is="ct.comp.guide" />
  <div v-if="val.comp_loading == true" :class="`comp_tj comp_${cfg.route.params.id}`">
    <div class="dljjc_box3_x">
      <div class="nm_mtab">
        <m-tabs
          :value="cfg.route.params?.id"
          :data="val"
          @update:value="ct.tabhand"
          :list="ct.tablist"
        />
      </div>
      <template v-if="ct.comp[cfg.route.params.id] != null">
        <component
          :is="ct.comp[cfg.route.params.id]"
          @update_load="ct.load"
          :load="val.comp_loading"
          :tjval="val"
        />
      </template>
    </div>
  </div>
</template>
<style scoped>
:deep(.page) {
  gap: 8px;
  display: flex;
}

:deep(.page div) {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

:deep(.__guildname) {
  font-size: 0.8rem;
  color: var(--n-label-text-color);
}

:deep(.page .van-pagination) {
  display: flex;
  justify-content: center;
  grid-column: span 4;
}

:deep(.drk_div) {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  flex-direction: column;
}

:deep(.select_gap) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  justify-content: center;
  gap: 8px 8px;
}

:deep(.n-statistic) {
  --n-label-font-size: var(--f12) !important;
  --n-value-font-size: var(--f12) !important;
  --n-value-text-color: var(--c2) !important;
  --n-label-text-color: var(--c3) !important;
}

:deep(.title_font) {
  font-size: 1.1em;
  color: var(--c1);
  text-shadow: 0 0 3px #000;
  text-align: center;
}

:deep(.select_gap div) {
  grid-column: span 1;
}

:deep(.ranking_gap) {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

:deep(.ranking_box) {
  cursor: pointer;
  display: flex;
  padding: 0.5em;
  border-radius: 0.25em;
  position: relative;
  background: var(--bg5);
  transition: 0.2s ease-in-out;
  align-items: center;
  gap: 0.35em;
  height: 100%;
  flex-direction: column;
}

:deep(.ranking_box:hover, .ranking_box:active) {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  background: var(--nbox4);
}

:deep(.ranking_hover) {
  display: none;
  position: absolute;
  right: 8px;
  bottom: 8px;
}
:deep(.ranking_box:hover .ranking_hover) {
  display: block;
}

@media (max-width: 460px) {
  :deep(.select_gap) {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  :deep(.select_gap div:first-child) {
    grid-column: span 2;
  }

  :deep(.title_font) {
    font-size: 0.9em;
  }

  :deep(.ranking_gap) {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px 6px;
  }
}

@media (max-width: 428px) {
  :deep(.ranking_gap) {
    gap: 2vw;
  }
  :deep(.title_font) {
    font-size: 3.55vw;
  }
  :deep(.ranking_box .ngrid div) {
    grid-column: span 2 !important;
  }
}
@media (max-width: 341px) {
  :deep(.ranking_gap) {
    grid-template-columns: repeat(1, 1fr);
    gap: 6px 6px;
  }
  :deep(.ranking_box .ngrid div) {
    grid-column: span 1 !important;
  }
}
</style>
<script>
import { cfg } from "@/cfg/cfg.js";
import guide from "./set.vue";

export default {
  setup() {
    const ct = {
      get_season: async () => {
        try {
          const back = await cfg.mget({
            url: `${cfg.url2}api/season`,
            query: {
              type: "get_season_list",
            },
          });
          if (back.code == 0) {
            const d = back.data;
            for (let index = 0; index < d.length; index++) {
              const d2 = d[index];
              val.season_list.push({
                value: d2.sid,
                label: `${d2.name}`,
              });
              if (index == 0) {
                val.season_click = d2.sid;
              }
            }
          } else {
            throw { code: -1, message: back.msg };
          }
        } catch (e) {
          val.loading_show = false;
          cfg.alert3({
            message: e.message,
          });
        }
      },
      load: (bl) => {
        val.comp_loading = false;
      },
      tabhand: (routename) => {
        cfg.router.push({
          path: `/gt/tj-${routename}`,
        });
      },
      comp: {
        drk: defineAsyncComponent(() => import(`./comp/tj_drk.vue`)),
        ark: defineAsyncComponent(() => import(`./comp/tj_ark.vue`)),
        mrk: defineAsyncComponent(() => import(`./comp/tj_mrk.vue`)),
        grk: defineAsyncComponent(() => import(`./comp/tj_grk.vue`)),
        dxtj: defineAsyncComponent(() => import(`./comp/tj_dxtj.vue`)),
        role: defineAsyncComponent(() => import(`./comp/tj_role.vue`)),
        oldtj: defineAsyncComponent(() => import(`./comp/tj_oldtj.vue`)),
        guide,
      },
      tablist: [
        {
          title: "排名",
          pcshow: true,
          tablist: [
            {
              name: "史高单日排名",
              label: "史高单日排名",
              key: "drk",
            },
            {
              name: "日均伤排名",
              label: "日均伤排名",
              key: "ark",
            },

            {
              name: "公会排名",
              label: "公会排名",
              key: "grk",
            },
          ],
        },
        {
          title: "统计",
          pcshow: true,
          tablist: [
            {
              name: "刀型统计",
              label: "刀型统计",
              key: "dxtj",
            },
            {
              name: "角色统计",
              label: "角色统计",
              key: "role",
            },
          ],
        },
        { name: "oldtj", title: "旧版" },
      ],
    };
    const val = reactive({
      season_list: [],
      season_click: null,
      comp_loading: false,
    });
    onMounted(async () => {
      await ct.get_season();
      val.comp_loading = true;
    });
    return { cfg, ct, val };
  },
};
</script>
